<template>
	<div>
      <div class="btn-p">
        <el-upload class='ensure ensureButt' :action="importFileUrl" :show-file-list='false' name="file" :onError="uploadError" :onSuccess="uploadSuccess" :beforeUpload="beforeAvatarUpload">
          <el-button size="small" :loading="upload">
            导入奖品信息
          </el-button>
        </el-upload>
        <el-button type="primary" size="small" :loading="record" @click="exportLuckyDrawRecord">导出中奖纪录</el-button>
      </div>
      <div class="div">奖项明细</div>
      <template>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column
              prop="name"
              label="活动名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="item_name"
              label="奖项名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="奖项总数量">
            </el-table-column>
            <el-table-column
              prop="used_count"
              label="中奖数量">
            </el-table-column>
            <el-table-column
              prop="surplus_count"
              label="未中奖数量">
            </el-table-column>
        </el-table>
      </template>
	</div>
  
</template>
<script>
import api from "../../config/api";
export default {
  data() {
    return {
      upload: false,
      record: false,
      tableData: [
      ],
      counts: 0,
      page_size: 10,
      page_num: 1,
      is_all: false, //是否显示全部按钮
      checked: false,
      importFileUrl: api.inputLogistics,
      excelUrl: "",
      className: {
        cursor: "pointer"
      }
    };
  },
  methods: {
    // 上传成功后的回调
    uploadSuccess(response, file, fileList) {
      if (response.code == "-1") {
        this.$message.error("上传失败");
      }
      if (response.code == "0") {
        this.queryLuckDrawItem();
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      }
      // this.loading.close();
      this.upload = false;
    },
    // 上传错误
    uploadError(e, file, fileList) {
      this.$message.error("上传失败，请重试");
      this.upload = false;
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload(file) {
      this.upload = true;
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!extension && !extension2) {
        this.upload = false;
        this.$message.error("上传模板只能是 xls、xlsx");
      }
      if (!isLt2M) {
        this.upload = false;
        this.$message.error("上传模板大小不能超过 10MB!");
      }
      return extension || (extension2 && isLt2M);
    },
    exportLuckyDrawRecord() {
      var param = { id: 1 };
      var _this = this;
      _this.record = true;
      axios({
        method: "POST",
        url: api.exportLuckyDrawRecord,
        data: param
      })
        .then(function(res) {
          if (res.data.code == "-1") {
            _this.$message.error(res.data.msg);
            _this.record = false;
          } else if (res.data.code == "0") {
            window.location.href = res.data.data.file_path;
            _this.record = false;
          }
        })
        .catch(function(err) {
          console.log(err);
          _this.$message({
            message: msg,
            type: "error"
          });
          _this.record = false;
        });
    },
    queryLuckDrawItem(ev) {
      var _this=this;
      var param={
        lucky_name:"",
        lucky_item_name:"",
        page_size:10,
        page_num:0
      }
      axios({
        method: "POST",
        url: api.queryLuckDrawItem,
        data: param
      })
        .then(function(res) {
          var table=res.data.data;
          _this.tableData=table.list;
        })
        .catch(function(err) {
          
        });
    }
  },
   mounted() {
    this.queryLuckDrawItem();
  }
};
</script>
<style>
.btn-p {
  margin: 10px 0;
}
.btn-p > .el-button,
.btn-p > div {
  margin: 0;
  margin-right: 10px;
  display: inline-block;
}
.div{
  height: 50px;
  line-height: 50px;
  font-weight: 700;
}
</style>
